<template>
  <div class="header-wrap">
    <div class="center">
      <div class="logo" @click="routerLink('/')">
        <el-image :src="configData.logo_top"></el-image>
      </div>
      <el-menu
        :default-active="activeIndex"
        class="menu"
        mode="horizontal"
        background-color="#191A20"
        text-color="#fff"
        active-text-color="#FF8200"
      >
        <el-menu-item index="1" @click="routerLink('/')">精选</el-menu-item>
        <el-menu-item index="2" @click="routerLink('/channelDy')"
          >电影</el-menu-item
        >
        <el-menu-item index="3" @click="routerLink('/channelDsj')"
          >电视剧</el-menu-item
        >
        <el-menu-item index="4" @click="routerLink('/channelZy')"
          >综艺</el-menu-item
        >
        <el-menu-item index="5" @click="routerLink('/channelDm')"
          >动漫</el-menu-item
        >
        <el-menu-item index="6" @click="routerLink('/channelDp')"
          >短片</el-menu-item
        >
        <el-menu-item index="7" @click="routerLink('/channelJlp')"
          >纪录片</el-menu-item
        >
        <el-menu-item index="8" @click="routerLink('/starLibrary')"
          >明星库</el-menu-item
        >
        <el-menu-item index="9" @click="routerLink('/news')"
          >娱乐资讯</el-menu-item
        >
        <el-menu-item index="10" @click="routerLink('/music')"
          >音乐</el-menu-item
        >
        <el-menu-item index="11" @click="routerLink('/contactUs')"
          >联系我们</el-menu-item
        >
      </el-menu>
      <div class="search-wrap">
        <div class="search">
          <input
            type="text"
            @keyup.enter="search"
            @click="triggerHotSearch"
            v-model="keyword"
          />
          <div class="btn" @click="search">
            <el-image lazy :src="require('../assets/images/search-icon.png')" alt="" srcset="" />
          </div>
        </div>
        <!-- 热门搜索 -->
        <div class="hot-search" v-if="isHotSearchShow">
          <div class="head">热门搜索</div>
          <div class="body">
            <p v-for="(item, index) in hotSearchData" :key="index" @click="closeHotSearch(item.label)">
              <b>{{ index + 1 }}</b>
              <span>{{item.label}}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      configData:[],//配置文件
      activeIndex: "1",
      isHotSearchShow: false,
      hotSearchData:[],
      keyword: "", //搜索关键词
    };
  },
  watch: {
    $route(toRouter, fromRouter) {
      this.doNavActive();
      this.keyword = "";
      this.$emit("searchSon", this.keyword);
    },
  },
  created () {
    //配置
    this.$http.getConfig().then((res) => {
      if (res.data.code === 0) {
        this.configData = res.data.data;
      } else {
        this.$message.error("获取失败，请重试！");
      }
    });
    //热门搜索
    this.$http.getHotSearch().then((res) => {
      if (res.data.code === 0) {
        this.hotSearchData = res.data.data;
      } else {
        this.$message.error("获取失败，请重试！");
      }
    });
  },
  methods: {
    doNavActive() {
      // 导航栏active状态更新
      // console.log("this.$route.meta.tab", this.$route.meta.tab);
      this.activeIndex = this.$route.meta.tab;
    },
    //跳转
    routerLink(path) {
      this.$router.push(path);
    },
    //搜索
    search() {
      if (this.keyword.trim().length>0) {
        this.$emit("searchSon", this.keyword);
        this.isHotSearchShow = false;
      }else{
        this.$message.error('搜索关键词不能为空，请重新输入！')
      }
    },
    //热搜显隐
    triggerHotSearch() {
      this.isHotSearchShow = !this.isHotSearchShow;
    },
    closeHotSearch(e) {
      this.isHotSearchShow = false;
      this.keyword = e;
      this.$emit("searchSon", e);
    },
  },
};
</script>

<style lang="scss" scoped>
.header-wrap {
  background: #191a20;
  width: 100%;
  height: 98px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1001;
  font-family: PingFang SC;
  .center {
    width: 1600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    .logo {
      width: 142px;
      height: 98px;
      overflow: hidden;
      font-size: 36px;
      font-weight: bold;
      color: #ffffff;
      line-height: 98px;
      cursor: pointer;
      .el-image {
        width: 100%;
        height: 100%;
      }
    }
    .el-menu--horizontal > .el-menu-item.is-active,
    .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
      border-bottom: none;
      font-weight: bold;
      font-size: 22px;
    }
    .el-menu--horizontal > .el-menu-item {
      color: #333;
      font-weight: 400;
      transition: 0s;
      font-size: 16px;
      height: 40px;
      line-height: 40px;
      padding: 0 15px;
    }
    .el-menu.el-menu--horizontal {
      border-bottom: none;
    }
    .search-wrap {
      position: relative;
      .search {
        width: 480px;
        height: 44px;
        background: rgba(255, 255, 255, 0.32);
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        input {
          height: 28px;
          line-height: 28px;
          width: 410px;
          border: none;
          border-right: 1px solid #fff;
          position: relative;
          z-index: 50;
          padding: 0 5px;
          background: none;
          color: #fff;
        }
        .btn {
          height: 28px;
          width: 70px;
          display: flex;
          justify-content: center;
          align-content: center;
          cursor: pointer;
          .el-image {
            width: 24px;
            height: 24px;
            position: relative;
            z-index: 50;
          }
        }
      }
      .hot-search {
        position: absolute;
        top: 44px;
        left: 0;
        width: 480px;
        background: #191a20;
        padding: 23px 22px;
        font-size: 20px;
        font-weight: 400;
        line-height: 28px;
        .head {
          color: #666666;
        }
        .body {
          color: #ffffff;
          margin-top: 6px;
          p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            b {
              display: inline-block;
              width: 24px;
              height: 24px;
              line-height: 24px;
              text-align: center;
              background: #999999;
              opacity: 1;
              border-radius: 2px;
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: 400;
              margin-right: 10px;
            }
          }
          p:nth-child(1) b,
          p:nth-child(2) b,
          p:nth-child(3) b {
            background: #ff8200;
          }
          p:not(:first-child) {
            margin-top: 10px;
          }
        }
      }
    }
  }
}
//重置element样式
::v-deep {
  .el-menu-item:hover {
    background-color: #191a20 !important;
  }
}
</style>